<template>
  <div
    style="
      position: relative;
      padding: 1%;
      display: flex;
      width: 98%;
      height: 95.8%;
      background-color: #000;
      color: #fff;
    "
  >
    <!-- 中间复制提示-->
    <div
      style="
        padding: 5px 10px;
        position: absolute;
        left: 50%;
        top: 40px;
        transform: translate(-50%, 0);
        background-color: #00e2ff;
        border-radius: 5px;
      "
      v-if="isCopySuccess"
    >
      复制成功
    </div>
    <!-- 左侧 -->
    <div
      style="
        padding-right: 1%;
        width: 24%;
        height: 100%;
        border-right: 1px solid rgb(160, 160, 160);
      "
    >
      <!-- 新建对话 按钮 -->
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px;
          background-color: #00e2ff94;
          border: 2px solid #00e2ff;
          border-radius: 6px;
          color: #fff;
          user-select: none;
          font-weight: 600;
        "
        :style="{ cursor: isStateChange() ? 'not-allowed' : 'pointer' }"
        @click="newDuihuaClick"
      >
        <div style="margin-right: 10px">+</div>
        <div>开启新对话</div>
      </div>
      <!-- 历史对话 -->
      <div style="margin-top: 20px">
        <div
          style="
            padding: 10px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            user-select: none;
            cursor: pointer;
            color: #fff;
            border-radius: 2px;
          "
          class="lishi-btn"
          v-for="(item, index) of allTextList"
          :key="'lishi' + index"
          :style="{
            cursor: isStateChange() ? 'not-allowed' : 'pointer',
            'background-color':
              index == nowTextIndex ? 'rgb(160, 160, 160)' : '',
          }"
          @click="changeDuihuaKuang(index)"
        >
          {{
            item[0].question.length > 17
              ? item[0].question.slice(0, 16) + "..."
              : item[0].question
          }}
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div style="position: relative; margin-left: 1%; width: 74%; height: 100%">
      <!-- 新对话 显示 -->
      <div
        v-if="newDuihuaShow"
        style="
          display: flex;
          justify-content: center;
          flex-direction: column;
          width: 100%;
          height: 100%;
          user-select: none;
        "
      >
        <div style="padding: 10px">
          <!-- 头像/标题 -->
          <div
            style="
              display: flex;
              width: 100%;
              height: 100px;
              background-color: rgb(60, 60, 60);
              border-radius: 10px;
            "
          >
            <!-- 头像 -->
            <div
              style="
                position: relative;
                margin: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 80px;
                width: 80px;
                border-radius: 50px;
                overflow: hidden;
              "
            >

              <img
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 90%;
                  height: 90%;
                "
                src="@/assets/img/ai-pic-blue.png"
              />
            </div>
            <!-- 标题 -->
            <div style="height: 100px; color: #fff">
              <div
                style="
                  margin-left: 10px;
                  display: flex;
                  align-items: center;
                  height: 60px;
                  font-size: 24px;
                "
              >
                您好，这里是猜猜看小游戏！
              </div>
              <div
                style="
                  margin-left: 10px;
                  display: flex;
                  align-items: flex-start;
                  height: 40px;
                "
              >
                心里想一个名字，我会在10个是否回答的提问中，把您心之所想猜出来。
              </div>
            </div>
          </div>
        </div>

        <!-- 快速提问 -->
        <div style="padding: 10px; color: #fff">
          <div
            style="
              padding: 10px;
              background-color: rgb(60, 60, 60);
              border-radius: 10px;
            "
          >
            <div style="margin: 5px 0">您可以这样问:</div>
            <div
              class="fast-question"
              v-for="(item, index) of fastQuestionList"
              :key="'fastQuestion' + index"
              @click="fastQuestion(item.str)"
            >
              {{ item.str }}
            </div>
          </div>
        </div>
        <!-- 开始提问 -->
        <div style="padding: 0 10px 10px 10px">
          <div
            class="start-ask"
            style="
              position: relative;
              padding: 10px;
              background-color: rgb(60, 60, 60);
              border-radius: 10px;
            "
          >
            <el-input
              placeholder="请开始提问"
              v-model="questionText"
              @keyup.native.enter="sendQuestion"
            ></el-input>
            <div
              :style="{
                backgroundColor: textloading ? 'rgb(160,160,160)' : '#007bff',
              }"
              style="
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translate(0, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 40px;
                color: #fff;
                user-select: none;
                cursor: pointer;
              "
              @click="sendQuestion"
            >
              ↑
            </div>
          </div>
        </div>
      </div>

      <!-- 问答 -->
      <div
        style="
          position: relative;
          padding: 10px;
          height: 70vh;
          overflow-y: auto;
        "
        v-if="!newDuihuaShow"
        id="aiWendaBox"
      >
        <div
          style="width: 100%"
          v-for="(item, index) of nowTextList"
          :key="'text' + index"
        >
          <!-- 右侧 -->
          <div
            style="
              margin-top: 20px;
              display: flex;
              justify-content: flex-end;
              width: 100%;
            "
          >
            <!-- 复制按钮 -->
            <div
              class="copy-btn"
              @click="copyClick(item.question)"
              style="
                margin-right: 10px;
                padding: 5px 10px;
                display: flex;
                align-items: center;
                user-select: none;
                cursor: pointer;
              "
            >
              <img
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 25px;
                  height: 25px;
                "
                src="@/assets/img/copy-pic-gray.png"
              />
            </div>
            <div
              style="
                padding: 5px 10px;
                display: flex;
                align-items: center;
                max-width: 82%;
                background-color: rgb(160, 160, 160);
                border-radius: 10px;
                border-top-right-radius: 0;
                color: #fff;
              "
            >
              {{ item.question }}
            </div>
            <div
              style="
                margin-left: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 50px;
                border-radius: 50px;
                background-color: rgb(100, 100, 100);
              "
            >
              <img
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 80%;
                  height: 80%;
                "
                src="@/assets/img/user-pic-blue.png"
              />
            </div>
          </div>
          <!-- 左侧 -->
          <div
            style="
              margin-top: 20px;
              display: flex;
              justify-content: flex-start;
              width: 100%;
            "
          >
            <div
              style="
                margin-right: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 50px;
                border-radius: 50px;
                color: #f00;
              "
            >
              <img
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 90%;
                  height: 90%;
                "
                src="@/assets/img/ai-pic-blue.png"
              />
            </div>
            <div
              style="
                position: relative;
                padding: 5px 10px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                max-width: 82%;
                background-color: rgb(160, 160, 160);
                border-radius: 10px;
                border-top-left-radius: 0;
                color: #fff;
              "
              v-loading="textloading && item.answer == '思考中...'"
            >
              {{ item.answer }}
              <!-- 快速回答 -->
              <div
                style="
                  position: absolute;
                  right: -60px;
                  bottom: -35px;
                  display: flex;
                  align-items: center;
                "
                v-if="index == nowTextList.length - 1"
              >
                <div
                  @click="fastQuestion(tip.str)"
                  class="tip-btn-click"
                  v-for="(tip, tipIndex) of fastTipList"
                  :key="'tip' + tipIndex"
                  style="
                    margin-right: 5px;
                    padding: 10px;
                    font-size: 12px;
                    user-select: none;
                    cursor: pointer;
                  "
                >
                  {{ tip.str }}
                </div>
              </div>
            </div>

            <!-- 复制按钮 -->
            <div
              class="copy-btn"
              @click="copyClick(item.question)"
              style="
                margin-left: 10px;
                padding: 5px 10px;
                display: flex;
                align-items: center;
                user-select: none;
                cursor: pointer;
              "
            >
              <img
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 25px;
                  height: 25px;
                "
                src="@/assets/img/copy-pic-gray.png"
              />
            </div>
          </div>
        </div>
      </div>

      <div
        v-if="!newDuihuaShow"
        class="start-ask"
        style="
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: rgb(60, 60, 60);
          border-radius: 10px;
        "
      >
        <el-input
          placeholder="请继续提问"
          v-model="questionText"
          @keyup.native.enter="sendQuestion"
        ></el-input>
        <div
          :style="{
            backgroundColor: textloading ? 'rgb(160,160,160)' : '#007bff',
          }"
          style="
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translate(0, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 40px;
            color: #fff;
            user-select: none;
            cursor: pointer;
          "
          @click="sendQuestion"
        >
          ↑
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fastQuestionList: [
        {
          str: "我已经准备好了!",
        },
        {
          str: "现在开始吧!",
        },
      ],

      allAnswerList: [
        {
          str: `游戏规则:\n我会提问至多20次，您只需要回答‘是’或‘否’或者‘不清楚’，我会尽可能猜测出您心里想的人或物\n已经准备好了吗？我马上开始提问了哦？请回答‘我准备好了’，游戏即可执行！`,
        },
        {
          str: `好的，既然你已经准备好了，那么游戏开始了！\n您心里想的有生命吗？`,
        },
      ],
      lifeAnswerList: [
        { str: "好的，它是男性吗？" },
        { str: "好的，他在亚洲吗？" },
        { str: "好的，他是公众人物吗？" },
        { str: "好的，他在电影或者音乐界出名吗？" },
        { str: "好的，他的名字是4个字吗？" },
        { str: "好的，他的名字是3个字吗？" },
        { str: "好的，我大概已经有点思绪了，这是第八个问题，他是彭于晏吗？" },
        { str: "好吧，那么第九个问题是他是你的偶像吗？" },
        {
          str: "好的，最后一个问题，他目前还活着吗？",
        },
        { str: "十个问题已经问完了，好的，我不知道是谁。" },
      ],
      noLifeAnswerList: [
        { str: "好的，这个东西存在现实世界吗？" },
        { str: "好的，这个东西是日常生活中会使用到的吗？" },
        { str: "好的，这个东西是民族特色吗？" },
        { str: "好的，这个东西是食物吗？" },
        { str: "好的，这个东西在影视作品中出现过吗？" },
        { str: "好的，这个东西仅存在亚洲吗？" },
        { str: "好的，我已经有些许方向了，这个东西是电子产品吗？" },
        { str: "好吧，倒数第二个问题，这个东西是不是三个字？" },
        {
          str: "好的，最后一个问题，他是不是会因为季节而变化？",
        },
        { str: "十个问题已经问完了，好的，我不知道是什么。" },
      ],
      fastTipList: [
        { str: "是", value: 0 },
        { str: "否", value: 1 },
        { str: "不清楚", value: 2 },
      ],
      nowTextList: [],
      nowTextIndex: 0,
      allTextList: [],
      lishiTalking: [],
      newDuihuaShow: true,
      questionText: "",
      textloading: false,
      isCopySuccess: false,
    };
  },
  methods: {
    // 复制按钮
    copyClick(str) {
      const textArea = document.createElement("textarea");
      textArea.value = str;

      textArea.style.position = "fixed";
      textArea.style.top = "0";
      textArea.style.left = "-9999px";
      document.body.appendChild(textArea);
      textArea.select();

      try {
        const successful = document.execCommand("copy");
        this.isCopySuccess = successful;
        setTimeout(() => {
          this.isCopySuccess = false;
        }, 3000);
      } catch (err) {
        console.error("复制失败", err);
      }

      document.body.removeChild(textArea);
    },
    // 判断是否在加载中
    isStateChange() {
      if (this.nowTextList.length) {
        let str = this.nowTextList[this.nowTextList.length - 1].answer;
        if (this.textloading && str == "思考中...") {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 切换对话框
    changeDuihuaKuang(val) {
      if (this.isStateChange()) {
        return;
      }
      this.newDuihuaShow = false;
      this.allTextList[this.nowTextIndex] = this.nowTextList;
      this.nowTextIndex = val;
      this.nowTextList = this.allTextList[this.nowTextIndex];
    },
    // 新建对话
    newDuihuaClick() {
      console.log(this.isStateChange());
      if (this.isStateChange()) {
        return;
      }
      if (!this.newDuihuaShow) {
        this.newDuihuaShow = true;
        this.allTextList[this.nowTextIndex] = this.nowTextList;
        this.nowTextIndex++;
        this.nowTextList = [];
      }
    },
    // 快速提问
    fastQuestion(str) {
      if (this.isStateChange()) {
        return;
      }
      this.questionText = str;
      this.sendQuestion();
    },
    // 到底部
    toBottom() {
      const aiWendaBox = document.getElementById("aiWendaBox");
      aiWendaBox.scrollTop = aiWendaBox.scrollHeight;
    },
    // 发送问题
    sendQuestion() {
      if (this.isStateChange()) {
        return;
      }
      let question = this.questionText.replace(" ", "");

      if (!question) {
        return;
      }

      this.questionText = "";

      this.nowTextList.push({
        question: question,
        answer: "思考中...",
      });

      this.$nextTick(() => {
        this.toBottom();
      });

      this.allTextList[this.nowTextIndex] = this.nowTextList;

      let length = this.nowTextList.length - 1;

      if (length == 2) {
        if (question.includes("是")) {
          this.allAnswerList = [...this.allAnswerList, ...this.lifeAnswerList];
        } else {
          this.allAnswerList = [
            ...this.allAnswerList,
            ...this.noLifeAnswerList,
          ];
        }
      }
      let answer = this.allAnswerList[length];

      this.textloading = true;
      this.newDuihuaShow = false;

      setTimeout(() => {
        this.textloading = false;
        this.nowTextList[length].answer = answer.str;
        this.toBottom();
      }, 5000);
    },
  },
  mounted() {},
};
</script>

<style>
::-webkit-scrollbar {
  width: 6px !important;
  background-color: #f5f5f5;
}

/* 滚动条轨道 */
div::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}

/* 小滑块 */
div::-webkit-scrollbar-thumb {
  background: #40a0ff49;
  border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
  background: #5940ff;
}

.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.start-ask .el-input__inner {
  padding-right: 75px !important;
  height: 50px !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>

<style lang="scss" scoped>

.tip-btn-click:hover {
  color: #41a9f4;
}

.lishi-btn:hover {
  background-color: rgb(160, 160, 160);
}

.fast-question {
  margin-top: 10px;
  padding: 10px;
  background-color: rgb(120, 120, 120);
  border-radius: 10px;
  color: #000;
  user-select: none;
  cursor: pointer;
}

.fast-question:hover {
  background-color: rgb(160, 160, 160);
  color: #fff;
}

.copy-btn {
  border-radius: 10px;
  opacity: 0.2;
}
.copy-btn:hover {
  background-color: rgba(101, 101, 101, 0.796);
  opacity: 1;
}
</style>